<%@ include file="../common/IncludeTop.jsp"%>

<script type="text/javascript">
	$(function () {
		$("#shippingCheckbox").on('click',function () {
			var addressTale = $('#addressTable');
			if(this.checked){
				console.log('ook');
				$("#addressTable").append("<tr> <th colspan=2>Shipping Address</th> </tr>" +
						"<tr> <td>First name:</td> <td><input type='text' name='order.shipToFirstName' value='${sessionScope.account.firstName}'/></td> </tr>" +
						"<tr> <td>Last name:</td> <td><input type='text' name='order.shipToLastName' value='${sessionScope.account.lastName}'/></td> </tr>" +
						"<tr> <td>Address 1:</td> <td><input type='text' size='40' name='order.shipAddress1' value='${sessionScope.account.address1}'/></td> </tr>" +
						"<tr> <td>Address 2:</td> <td><input type='text' size='40' name='order.shipAddress2' value='${sessionScope.account.address2}'/></td> </tr>" +
						"<tr> <td>City:</td> <td><input type='text' name='order.shipCity' value='${sessionScope.account.city}'/></td> </tr> " +
						"<tr> <td>State:</td> <td><input type='text' size='4' name='order.shipState' value='${sessionScope.account.state}'/></td> </tr> " +
						"<tr> <td>Zip:</td> <td><input type='text' size='10' name='order.shipZip' value='${sessionScope.account.zip}'/></td> </tr> " +
						"<tr> <td>Country:</td> <td><input type='text' size='15' name='order.shipCountry' value='${sessionScope.account.country}'/></td> </tr>");
			}else{
				$("#addressTable").empty();
			}
		});
	});
</script>

<div id="BackLink">
	<a href="browse?action=viewMain">Return to Main Menu</a>
</div>

<div id="Catalog">
	<form action="service?action=generateOrder" method="post" id="addressForm">
		<table  style="width: 520px;margin-left: 267px">
			<tr>
				<th colspan=2>Payment Details</th>
			</tr>

			<tr>
				<td>Card Type:</td>
				<td>
					<select name="order.cardType">
						<option selected="selected" value="Visa">Visa</option>
						<option value="MasterCard">MasterCard</option>
						<option value="American Express">American Express</option>
					</select>
				</td>
			</tr>

			<tr>
				<td>Card Number:</td>
				<td>
					<input name="order.creditCard" type="text">
				</td>
			</tr>

			<tr>
				<td>Expiry Date (MM/YYYY):</td>
				<td><input name="order.expiryDate" type="text"></td>
			</tr>

			<tr>
				<th colspan=2>Billing Address</th>
			</tr>

			<tr>
				<td>First name:</td>
				<td><input name="order.billToFirstName" value="${sessionScope.account.firstName}" type="text"></td>
			</tr>
			<tr>
				<td>Last name:</td>
				<td><input name="order.billToLastName" value="${sessionScope.account.lastName}" type="text"></td>
			</tr>
			<tr>
				<td>Address 1:</td>
				<td><input name="order.billAddress1" value="${sessionScope.account.address1}" type="text" size="40"></td>
			</tr>
			<tr>
				<td>Address 2:</td>
				<td><input name="order.billAddress2" value="${sessionScope.account.address2}" type="text" size="40"></td>
			</tr>
			<tr>
				<td>City:</td>
				<td><input name="order.billCity" value="${sessionScope.account.city}" type="text"></td>
			</tr>
			<tr>
				<td>State:</td>
				<td><input name="order.billState" value="${sessionScope.account.state}" type="text" size="4"></td>
			</tr>
			<tr>
				<td>Zip:</td>
				<td><input name="order.billZip" value="${sessionScope.account.zip}" type="text" size="10"></td>
			</tr>
			<tr>
				<td>Country:</td>
				<td><input name="order.billCountry" value="${sessionScope.account.country}" type="text" size="15"></td>
			</tr>

			<tr>
				<td colspan="2">
					<input id="shippingCheckbox" name="shippingAddressRequired" value="true" type="checkbox" >Ship to different address...
				</td>
			</tr>
		</table>

		<table style="width: 520px;margin-left: 267px" id="addressTable">

		</table>
		<input name="newOrder" value="Continue" type="submit">
	</form>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>